<template>
  <div id="container" :style="style"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
// import giftBoomJson from '../assets/gift/json/gift-bomb.json'
import lottie, { type AnimationItem } from "lottie-web";

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: "",
      };
    },
  },
  width: {
    type: Number,
    default: 200,
  },
  height: {
    type: Number,
    default: 200,
  },
});

const container = ref<HTMLElement | null>(null);
const animation = ref<AnimationItem | null>(null);

// 初始化动画
const initAnimation = () => {
  if (container.value) {
    animation.value?.destroy(); // 安全销毁旧实例
    animation.value = lottie.loadAnimation({
      container: container.value,
      // ...props.options,
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: '../assets/gift/json/gift-bomb.json',
    });
  }
};

// 监听选项变化
watch(() => props.options, initAnimation, { deep: true });

// 暴露控制方法
defineExpose({
  play: () => animation.value?.play(),
  pause: () => animation.value?.pause(),
  stop: () => animation.value?.stop(),
});

// 自动清理
onUnmounted(() => animation.value?.destroy());

// 样式计算
const style = computed(() => {
  const width =
    typeof props.width === "number"
      ? `${props.width}px`
      : props.width ?? "100%";
  const height =
    typeof props.height === "number"
      ? `${props.height}px`
      : props.height ?? "100%";
  return "width:" + width + ";" + "height:" + height;
});
console.log(style, "stylestylestylestyle");

onMounted(() => {
  container.value = document.getElementById("container");
  console.log(container.value, "sssssssssssssssssssssssssssssss");
  initAnimation();
});
</script>

<style lang="less">
#container {
  
}
</style>
